<template>
  <div class="noteItem" v-if="note" @click="toNoteDetail">
    <div class="author">
      <div class="left">
        <div class="avatar">
          <van-image
            width="40"
            height="40"
            lazy-load
            round
            :src="note.user.avatar"
          />
        </div>
        <div class="userinfo">
          <div class="username">{{ note.user.username }}</div>
          <div class="sub">{{ note.user.addtime | timestampToTime }}</div>
        </div>
      </div>
      <div class="right">
        <div v-if="!isFollow" class="follow" @click.stop="follow">
          +&nbsp;关注
        </div>
        <div v-else class="unfollow" @click.stop="unfollow">已关注</div>
        <div class="share" @click.stop="share">
          <svg
            t="1677136516616"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4040"
            width="24"
            height="24"
          >
            <path
              d="M512 704c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m-64-192c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m0-256c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z"
              p-id="4041"
              fill="#999999"
            ></path>
          </svg>
        </div>
      </div>
    </div>
    <div class="title">{{ note.title }}</div>
    <div
      v-if="note.topics || note.content"
      class="content"
      :class="{ hide: !allContent }"
      ref="content"
    >
      <span class="topics" v-if="note.topics">
        #{{ note.topics[0].name }}
      </span>
      <span v-if="note.content">{{ note.content }}</span>
      <span v-show="!allContent" class="all" @click="allContent = true">
        全部
      </span>
    </div>
    <div class="index">
      <div class="images" v-if="note.images">
        <div
          class="image"
          v-for="(image, index) in note.images.slice(0, 3)"
          :key="index"
        >
          <van-image
            width="110"
            height="110"
            fit="cover"
            lazy-load
            :src="image"
            radius="5px"
          />
        </div>
        <div class="moreImage" v-if="note.images.length > 3">
          +{{ note.images.length - 3 }}
        </div>
      </div>
      <div class="article" v-if="note.article.id != 0">
        <div class="left">
          <van-image
            width="100%"
            height="auto"
            lazy-load
            :src="note.article.cover"
            radius="10px 0 0 10px"
          />
          <div class="countBox">
            <div>
              <svg
                t="1677140094156"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5302"
                width="16"
                height="16"
              >
                <path
                  d="M515.2 224c-307.2 0-492.8 313.6-492.8 313.6s214.4 304 492.8 304 492.8-304 492.8-304S822.4 224 515.2 224zM832 652.8c-102.4 86.4-211.2 140.8-320 140.8s-217.6-51.2-320-140.8c-35.2-32-70.4-64-99.2-99.2-6.4-6.4-9.6-12.8-16-19.2 3.2-6.4 9.6-12.8 12.8-19.2 25.6-35.2 57.6-70.4 92.8-102.4 99.2-89.6 208-144 329.6-144s230.4 54.4 329.6 144c35.2 32 64 67.2 92.8 102.4 3.2 6.4 9.6 12.8 12.8 19.2-3.2 6.4-9.6 12.8-16 19.2C902.4 585.6 870.4 620.8 832 652.8z"
                  p-id="5303"
                  fill="#ffffff"
                ></path>
                <path
                  d="M512 345.6c-96 0-169.6 76.8-169.6 169.6 0 96 76.8 169.6 169.6 169.6 96 0 169.6-76.8 169.6-169.6C681.6 422.4 604.8 345.6 512 345.6zM512 640c-67.2 0-121.6-54.4-121.6-121.6 0-67.2 54.4-121.6 121.6-121.6 67.2 0 121.6 54.4 121.6 121.6C633.6 582.4 579.2 640 512 640z"
                  p-id="5304"
                  fill="#ffffff"
                ></path>
              </svg>
              <span>{{ note.article.count.count_view | formatter }}</span>
            </div>
            <div>
              <svg
                t="1677140255784"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="11573"
                width="16"
                height="16"
              >
                <path
                  d="M779.2 881.6h-44.8c-17.6 0-32-14.4-32-32s14.4-32 32-32h44.8c4.8 0 51.2-1.6 62.4-28.8 14.4-36.8 72-264 92.8-347.2 3.2-12.8 11.2-49.6 0-62.4-4.8-4.8-14.4-6.4-20.8-6.4H649.6c-17.6 0-32-14.4-32-32s14.4-32 32-32H912c38.4 0 60.8 16 70.4 30.4 30.4 36.8 17.6 91.2 12.8 116.8v1.6c-8 32-76.8 307.2-94.4 355.2-19.2 51.2-76.8 68.8-121.6 68.8z"
                  fill="#ffffff"
                  p-id="11574"
                ></path>
                <path
                  d="M331.2 480c-12.8 0-24-8-30.4-20.8-6.4-16 1.6-35.2 17.6-41.6 24-9.6 44.8-27.2 57.6-49.6l8-14.4c35.2-62.4 57.6-134.4 67.2-214.4 1.6-11.2 4.8-20.8 6.4-27.2 9.6-27.2 46.4-56 92.8-59.2 30.4-1.6 86.4 8 126.4 92.8 64 136 0 212.8-3.2 216-11.2 12.8-32 14.4-44.8 3.2-12.8-11.2-14.4-32-3.2-44.8 1.6-1.6 38.4-51.2-6.4-147.2-11.2-24-32-54.4-60.8-56-20.8-1.6-36.8 11.2-40 17.6 0 0-1.6 4.8-1.6 14.4-9.6 88-35.2 168-75.2 238.4l-8 12.8c-19.2 35.2-51.2 64-89.6 78.4-4.8 1.6-8 1.6-12.8 1.6zM777.6 881.6H500.8c-20.8 0-40-3.2-59.2-11.2-52.8-19.2-128-48-128-48l22.4-59.2 128 48c11.2 4.8 24 6.4 36.8 6.4h276.8c17.6 0 32 14.4 32 32s-14.4 32-32 32z"
                  fill="#ffffff"
                  p-id="11575"
                ></path>
                <path
                  d="M294.4 902.4H97.6c-30.4 0-54.4-25.6-54.4-56V393.6c0-27.2 20.8-65.6 54.4-65.6h196.8c20.8 0 46.4 17.6 46.4 65.6v452.8c0 41.6-24 56-46.4 56z m-187.2-64h169.6V393.6v-1.6H107.2V838.4z"
                  fill="#ffffff"
                  p-id="11576"
                ></path>
              </svg>
              <span>
                {{ note.article.count.count_like | formatter }}
              </span>
            </div>
            <div>
              {{ note.article.duration | time }}
            </div>
          </div>
        </div>
        <div class="right">
          <div class="r-title">{{ note.article.title }}</div>
          <div class="username">
            @{{ note.article.author.userinfo.username }}
          </div>
        </div>
      </div>
    </div>
    <div class="bottom" :class="{ hasTop: note.article.id == 0 }">
      <div class="function" @click.stop="doLike">
        <svg
          v-if="!isLike"
          t="1677204147051"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3623"
          width="22"
          height="22"
        >
          <path
            d="M759.1936 826.9824c-20.0704 21.9136-43.52 32.5632-71.4752 32.5632L420.2496 859.5456c-32.768 0-59.392-27.8528-59.392-62.0544L360.8576 468.2752c28.2624-29.9008 103.936-118.4768 147.0464-250.88 6.7584-20.7872 21.8112-55.5008 47.3088-52.8384 19.8656 1.9456 40.6528 24.4736 43.7248 47.104 1.8432 16.896-14.4384 115.5072-40.5504 167.6288L535.552 424.8576l241.152 0c32.768 0 59.392 27.8528 59.4944 63.2832C838.8608 556.2368 829.952 749.9776 759.1936 826.9824zM296.448 797.3888c0 14.336-23.7568 31.0272-54.4768 31.0272-30.72 0-54.4768-16.6912-54.4768-31.0272L187.4944 486.912c0-14.336 23.7568-31.0272 54.4768-31.0272 30.72 0 54.4768 16.6912 54.4768 31.0272L296.448 797.3888zM895.6928 486.912c0-68.5056-53.3504-124.2112-118.8864-124.2112L629.1456 362.7008c19.6608-59.6992 31.9488-134.4512 28.5696-159.6416-7.0656-51.6096-49.664-95.6416-96.9728-100.2496-22.6304-2.1504-79.1552 2.56-109.1584 94.72-37.9904 116.736-103.8336 195.8912-128.9216 223.1296-20.48-16.6912-48.8448-26.8288-80.6912-26.8288-63.8976 0-113.9712 40.96-113.9712 93.184l0 310.4768c0 52.224 50.0736 93.184 113.9712 93.184 30.9248 0 58.4704-9.728 78.848-25.6 21.1968 33.9968 57.7536 56.6272 99.4304 56.6272l267.4688 0c44.3392 0 82.8416-17.408 114.3808-51.6096C904.704 758.3744 896.1024 496.7424 895.6928 486.912z"
            fill="#999"
            p-id="3624"
          ></path>
        </svg>
        <svg
          v-else
          t="1677204147051"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3623"
          width="22"
          height="22"
        >
          <path
            d="M759.1936 826.9824c-20.0704 21.9136-43.52 32.5632-71.4752 32.5632L420.2496 859.5456c-32.768 0-59.392-27.8528-59.392-62.0544L360.8576 468.2752c28.2624-29.9008 103.936-118.4768 147.0464-250.88 6.7584-20.7872 21.8112-55.5008 47.3088-52.8384 19.8656 1.9456 40.6528 24.4736 43.7248 47.104 1.8432 16.896-14.4384 115.5072-40.5504 167.6288L535.552 424.8576l241.152 0c32.768 0 59.392 27.8528 59.4944 63.2832C838.8608 556.2368 829.952 749.9776 759.1936 826.9824zM296.448 797.3888c0 14.336-23.7568 31.0272-54.4768 31.0272-30.72 0-54.4768-16.6912-54.4768-31.0272L187.4944 486.912c0-14.336 23.7568-31.0272 54.4768-31.0272 30.72 0 54.4768 16.6912 54.4768 31.0272L296.448 797.3888zM895.6928 486.912c0-68.5056-53.3504-124.2112-118.8864-124.2112L629.1456 362.7008c19.6608-59.6992 31.9488-134.4512 28.5696-159.6416-7.0656-51.6096-49.664-95.6416-96.9728-100.2496-22.6304-2.1504-79.1552 2.56-109.1584 94.72-37.9904 116.736-103.8336 195.8912-128.9216 223.1296-20.48-16.6912-48.8448-26.8288-80.6912-26.8288-63.8976 0-113.9712 40.96-113.9712 93.184l0 310.4768c0 52.224 50.0736 93.184 113.9712 93.184 30.9248 0 58.4704-9.728 78.848-25.6 21.1968 33.9968 57.7536 56.6272 99.4304 56.6272l267.4688 0c44.3392 0 82.8416-17.408 114.3808-51.6096C904.704 758.3744 896.1024 496.7424 895.6928 486.912z"
            fill="#ff0000"
            p-id="3624"
          ></path>
        </svg>
        <div class="num" :class="{ like: isLike }" style="margin-top: 2px">
          {{ likeNum | formatter }}
        </div>
      </div>
      <div class="function">
        <svg
          t="1677343044376"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6378"
          width="26"
          height="26"
        >
          <path
            d="M386.4576 450.6624m-40.96 0a40.96 40.96 0 1 0 81.92 0 40.96 40.96 0 1 0-81.92 0Z"
            p-id="6379"
            fill="#999"
          ></path>
          <path
            d="M512 450.6624m-40.96 0a40.96 40.96 0 1 0 81.92 0 40.96 40.96 0 1 0-81.92 0Z"
            p-id="6380"
            fill="#999"
          ></path>
          <path
            d="M637.5424 450.6624m-40.96 0a40.96 40.96 0 1 0 81.92 0 40.96 40.96 0 1 0-81.92 0Z"
            p-id="6381"
            fill="#999"
          ></path>
          <path
            d="M752.64 184.32H271.36c-47.9744 0-87.04 39.7824-87.04 88.6784v357.4784c0 48.896 39.0656 88.6784 87.04 88.6784h332.6976c0.9216 0 1.8432 0.3072 2.6112 0.8704l159.0272 111.36a45.5424 45.5424 0 0 0 47.2064 3.1744c15.4112-7.9872 25.0368-23.808 25.088-41.3696L839.68 273.1008v-0.1024c0-48.896-39.0656-88.6784-87.04-88.6784z m34.2016 599.3472l-150.784-105.6256a55.61344 55.61344 0 0 0-32-10.1376H271.36c-19.7632 0-35.84-16.7936-35.84-37.4784V272.9984c0-20.6848 16.0768-37.4784 35.84-37.4784h481.28c19.7632 0 35.84 16.7936 35.84 37.4272l-1.6384 510.72z"
            p-id="6382"
            fill="#999"
          ></path>
        </svg>
        <div class="num">
          {{ note.count.count_commented | formatter }}
        </div>
      </div>
      <div class="function" @click.stop="share">
        <svg
          t="1677737888219"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="11140"
          width="16"
          height="16"
        >
          <path
            d="M981.333333 439.466667c-25.6 0-42.666667 17.066667-42.666666 42.666666V896c0 21.333333-17.066667 42.666667-42.666667 42.666667H128c-25.6 0-42.666667-17.066667-42.666667-42.666667V132.266667c0-21.333333 17.066667-42.666667 42.666667-42.666667h396.8c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666666H128c-72.533333 0-128 55.466667-128 128V896c0 68.266667 55.466667 128 128 128h768c72.533333 0 128-55.466667 128-128v-418.133333c0-21.333333-17.066667-38.4-42.666667-38.4zM896 0h-174.933333c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666666h157.866666L371.2 588.8c-17.066667 17.066667-17.066667 42.666667 0 59.733333 8.533333 8.533333 21.333333 12.8 29.866667 12.8 12.8 0 21.333333-4.266667 29.866666-12.8L938.666667 145.066667v157.866666c0 25.6 17.066667 42.666667 42.666666 42.666667s42.666667-17.066667 42.666667-42.666667V128c0-72.533333-55.466667-128-128-128z"
            fill="#999"
            p-id="11141"
          ></path>
        </svg>
        <div class="text">分享</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  props: ["note"],
  data() {
    return {
      allContent: true,
      isLike: false,
      likeNum: 0,
      isFollow: false,
    };
  },
  mounted() {
    if (this.$refs.content) {
      //   console.log(this.$refs.content.clientHeight);
      if (this.$refs.content.clientHeight > 40) {
        this.allContent = false;
      }
    }

    this.likeNum = this.note.count.count_liked;

    let id = this.note.user.id;
    if (localStorage.getItem("nsMine")) {
      let follows = JSON.parse(localStorage.getItem("follows") || "[]");
      if (follows.indexOf(id) != -1) {
        this.isFollow = true;
      }
    }
  },
  methods: {
    doLike() {
      console.log("doLike");
    },
    ...mapMutations(["changeShare"]),
    share() {
      // console.log("share");
      this.changeShare();
    },
    toNoteDetail() {
      this.$router.push({ path: "/noteDetail", query: { id: this.note.id } });
    },
    unfollow() {
      let id = this.note.user.id;
      this.$dialog
        .confirm({
          message: "确定要取消关注TA吗？",
        })
        .then(() => {
          // on confirm
          let follows = JSON.parse(
            localStorage.getItem("follows") || "[]"
          ).filter((o) => o != id);
          localStorage.setItem("follows", JSON.stringify(follows));
          this.isFollow = false;
          this.$toast("取消关注成功");
        })
        .catch(() => {
          // on cancel
        });
    },
    follow() {
      let id = this.note.user.id;
      if (!localStorage.getItem("nsMine")) {
        this.$router.replace({ path: "/login" });
      } else {
        let follows = JSON.parse(localStorage.getItem("follows") || "[]");
        follows.unshift(id);
        localStorage.setItem("follows", JSON.stringify(follows));
        this.isFollow = true;
        this.$toast("关注成功");
      }
    },
  },
  filters: {
    timestampToTime: function (timestamp) {
      if (timestamp === 0 || timestamp == null) {
        return "";
      } else {
        var date = new Date(timestamp * 1000);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        return Y + M + D;
      }
    },
    formatter: function (value) {
      if (value >= 1000 && value < 10000) {
        value = (value / 1000).toFixed(1) + "k";
      }
      if (value >= 10000 && value < 10000000) {
        value = (value / 10000).toFixed(1) + "w";
      }
      return value;
    },
    time: function (text) {
      let minute =
        Math.floor(text / 60) < 10
          ? `0${Math.floor(text / 60)}`
          : Math.floor(text / 60);
      let second = text % 60 < 10 ? `0${text % 60}` : text % 60;
      return `${minute}'${second}''`;
    },
  },
};
</script>

<style lang="scss" scoped>
.noteItem {
  margin-top: 10px;
  padding: 10px 15px 5px;
  background-color: white;

  :deep(.van-image) {
    display: block !important;
  }

  .author {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .left {
      display: flex;
      align-items: center;

      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #f2f2f2;
        margin-right: 8px;

        :deep(.van_image) {
          display: block;
        }
      }

      .userinfo {
        display: flex;
        flex-direction: column;

        .username {
          font-size: 15px;
          font-weight: bold;
          margin-bottom: 5px;
        }

        .sub {
          font-size: 13px;
          color: #999;
        }
      }
    }

    .right {
      display: flex;
      align-items: center;

      .follow {
        font-size: 13px;
        font-weight: bold;
        color: red;
        margin-right: 15px;
      }

      .unfollow {
        margin-right: 15px;
        font-size: 13px;
        font-weight: bold;
        color: #999;
      }

      .share {
        width: 24px;
        height: 24px;
      }
    }
  }

  .title {
    font-size: 18px;
    font-weight: bold;
  }

  .content {
    white-space: pre-wrap;
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 20px;
    position: relative;

    .topics {
      color: cornflowerblue;
    }

    .all {
      position: absolute;
      bottom: 1px;
      right: 0;
      box-shadow: -10px 0px 10px -1px white;
      background-color: white;
      font-size: 14px;
      color: #999;
    }
  }

  .hide {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }

  .index {
    margin-bottom: 10px;

    .images {
      display: flex;
      //   justify-content: space-between;
      align-items: center;
      position: relative;
      margin-bottom: 10px;

      .image {
        margin-right: 5.5px;
        margin-bottom: 5.5px;

        // :deep(.van-image) {
        //   display: block !important;
        // }
      }

      .image:nth-of-type(3) {
        margin-right: 0;
      }

      .moreImage {
        position: absolute;
        bottom: 8px;
        right: 8px;
        color: white;
        font-size: 16px;
      }
    }

    .article {
      display: flex;
      align-items: center;
      background-color: #f3f6f6;
      border-radius: 10px;

      .left {
        width: 50%;
        margin-right: 10px;
        flex-shrink: 0;
        position: relative;

        .countBox {
          position: absolute;
          bottom: 10px;
          left: 0;
          width: 86%;
          padding: 0 7%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          > div {
            font-size: 12px;
            color: white;
            display: flex;
            align-items: center;

            span {
              margin-left: 5px;
            }
          }
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 10px;

        .r-title {
          font-size: 15px;
          margin-bottom: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          /*! autoprefixer: off */
          -webkit-box-orient: vertical;
          /* autoprefixer: on */
        }

        .username {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }

  .bottom {
    padding-top: 5px;
    display: flex;
    justify-content: space-between;

    .function {
      width: 33%;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #999;
      line-height: 18px;

      .num {
        font-size: 16px;
        margin-left: 4px;
      }

      .text {
        margin-left: 4px;
        font-size: 14px;
      }

      .like {
        color: red;
      }
    }
  }

  .hasTop {
    border-top: 1px solid #f2f2f2;
  }
}
</style>
